D3 颜色与插值

颜色

RGB

RGB 色彩模式 (RGB color mode)，是一种工业界的颜色标准，主要有红（R，Red）、绿（G，Green）、蓝（B，Blue）三色，即RGB，通过相互之间的叠加来取得各种各样的颜色。RGB 主要覆盖了目前所有常用和人类肉眼可用的颜色，也是最为常用的颜色模式之一。

除此之外，RGB 的亮度各有 0～255个亮度，通过他们三个通道的叠加可以组合出大约1678万中颜色，通常也会被称之为1600万色或千万色，还可以被称之为24位色，在D3中他有如下方法：

方法

1
2
3
4

var color = d3.rgb(166,12,12);
console.log(color.has())
console.log(color.darker(2).toString())
console.log(color.brighter(2))

在上述的 code中，我们可以通过使用has()来返回 color的has颜色值，也可以通过使用toString()来返回该颜色的十六进制，darker()与brighter()数值为2即亮度为2，暗度为2的颜色变值。

HSL

HSL 与 RGB 的区别就是，他是通过将 RGB 色彩模式内的各个组成颜色放在圆柱坐标系的表示方法。这种表示方法会比基于笛卡尔坐标系的集合结构中的RGB更加直观。

HSL 颜色空间主要通过色相（H，Hue）、饱和度（S，Saturation）、亮度（L，Lightness）三个相互叠加来得到各种颜色，他的色相范围是0°～360°，饱和度和亮度分别为0～1。其中色相°是一个角度，每个角度都可以代表其中的一个颜色，例如0°代表红色，120°代表绿色，240°代表蓝色。

通常的情况下，饱和度越大，颜色就越鲜艳，而亮度值主要控制色彩的明暗变化，当亮度越大，就越接近与白色，反之值越小就越接近黑色，默认的情况下RGB与HSL的颜色是可以互相转换的。

方法

1
2
3
4
5
6
7

var rgb = d3.rgb(166,12,12)
console.log(rgb.hsl())

var hsl = d3.hsl(0,0.8651685393258428,0.34901960784313724)
console.log(hsl.rgb().toString())
console.log(hsl.darker(2).toString())
console.log(hsl.brighter(2).toString())

插值

插值（Interpolation）主要用于计算介于两个颜色之间的颜色，主要可以通过使用d3.interpolateRgb()来处理RGB颜色之间的插值运算。而如果是HSL颜色则可以通过使用d3.interpolateHsl()来处理HSL颜色之间的插值运算。除此之外，D3 还提供了一种更加智能的方法即：d3.interpolate()，他会自动的判断颜色类型，还可以处理字符串之间的差值。

1
2
3
4
5
6
7

var ragOne = d3.rgb(255,0,0)
var ragTwo = d3.rgb(0,255,255)

var interpolate = d3.interpolate(ragOne,ragTwo)

console.log(interpolate(0))
console.log(interpolate(0.5))

在上述的 code 中，ragOne与ragTwo的插值通过interpolate来自动判断颜色类型，并根据设置的插值进行计算，当插值为0时返回了#ff0000颜色，而当插值为0.5时，则返回了#808080颜色。